import { untrack } from 'svelte';

const MOBILE_BREAKPOINT = 768;

export class IsMobile {
    get current() {
        return this.#current;
    }

    #current = $state<boolean>(false);

    constructor() {
        $effect(() => {
            return untrack(() => {
                const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
                const onChange = () => {
                    this.#current = window.innerWidth < MOBILE_BREAKPOINT;
                };
                mql.addEventListener('change', onChange);
                onChange();
                return () => {
                    mql.removeEventListener('change', onChange);
                };
            });
        });
    }
}
